import Modals from '@/components/modals/Modals';
import ModalsFooterBtn from '@/components/modals/ModalsFooterBtn';
import { Checkbox, Input, message, Radio } from 'antd';
import { useEffect, useState } from 'react';
import '../index.scss';
import { KnowledgeBaseApprovalStore } from '@/store/knowledgeBaseApproval';

interface Props {
  isApproval: boolean;
  isModalOpen: boolean;
  setIsModalOpen: (value: boolean) => void;
  rejectValue: string;
  setRejectValue: (value: string) => void;
  reApproval: (row: any) => void;
  approvalHistory: any[];
  defaultTrigger: boolean;
  rowData: any;
  utilsHandle: (row: any, flag: string) => void;
  handleModalOk: (row?: any) => void;
  updateDownloadData: (type: string) => void;
  setIsShow: (value: boolean) => void;
  isLoadingModal?: boolean;
  setIsLoadingModal?: (value: boolean) => void;
}

export default function RejectReason({
  isApproval,
  isModalOpen,
  setIsModalOpen,
  rejectValue,
  setRejectValue,
  reApproval,
  approvalHistory,
  defaultTrigger,
  rowData,
  utilsHandle,
  handleModalOk,
  updateDownloadData,
  setIsShow,
  isLoadingModal,

  setIsLoadingModal = () => {},
}: Props) {
  const { radioValue, setRadioValue, isButtonShow } = KnowledgeBaseApprovalStore();
  const [messageApi, contextHolder] = message.useMessage();

  const onButton = () => {
    return (
      <div className="flex items-center justify-between gap-3 border-t border-[#E5E5E5] px-4 py-3">
        <div className="checkbox">
          {isButtonShow && (
            <Checkbox
              checked={radioValue}
              onChange={() => {
                setRadioValue(!radioValue);
              }}
            >
              后续驳回不弹框
            </Checkbox>
          )}
        </div>
        <div className='py-3" flex items-center justify-end gap-3 px-4'>
          <ModalsFooterBtn
            onClick={() => {
              setIsModalOpen(false);
              setRejectValue(''); //把驳回原因清空
              setIsLoadingModal(true);
            }}
          >
            取消
          </ModalsFooterBtn>
          <ModalsFooterBtn
            type="primary"
            onClick={() => {
              // if (!isLoadingModal) {
              //   return messageApi.info('数据处理中，请稍后');
              // }
              if (isApproval) {
                reApproval(approvalHistory); //重新审批
                setIsModalOpen(false);
              } else {
                // console.log(defaultTrigger);
                if (defaultTrigger) {
                  utilsHandle(rowData, 'reject');
                  setIsModalOpen(false);
                } else {
                  updateDownloadData('reject'); //调用驳回
                  handleModalOk(); //调用全部驳回
                }
                setIsShow(false);
              }
              setIsLoadingModal(false);
              setRejectValue(''); //把驳回原因清空
            }}
          >
            提交
          </ModalsFooterBtn>
        </div>
      </div>
    );
  };

  return (
    <div>
      {contextHolder}
      <Modals
        title={
          <div className="text-nowrap text-sm text-[#474C5F]">
            {isApproval ? '重新审批' : '驳回原因'}
            {'（选填） '}
          </div>
        }
        zIndex={1000}
        open={isModalOpen}
        footer={onButton()}
        onCancel={() => {
          setIsModalOpen(false);
          setRejectValue(''); //把驳回原因清空
          setIsLoadingModal(true);
        }}
      >
        <Input.TextArea
          placeholder={isApproval ? '请输入重新审批原因' : '请输入驳回原因'}
          autoSize={{ minRows: 10, maxRows: 10 }}
          classNames={{
            textarea: '!border-0 !bg-[#F3F4F9]',
          }}
          value={rejectValue}
          onChange={(e) => {
            setRejectValue(e.target.value);
          }}
        />
      </Modals>
    </div>
  );
}
